<template>
  <view class="content">
    <view class="flex header">
      <image
        class="icon"
        @click="gotoTabPage('catagory')"
        src=""
      ></image>
      <input disabled type="text" class="flex-1 h-50" @click="gotoPage('search')" />
      <image
        class="icon"
        src=""
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello Mini Program",
    };
  },
  onLoad() {},
  methods: {
    gotoTabPage(pageTag) {
      uni.switchTab({
        url: `/pages/${pageTag}/index`,
      });
    },
    gotoPage(pageTag) {
      uni.navigateTo({
        url: "pages/search/index",
      });
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.h-50 {
  height: 50px;
}
.header {
  background: linear-gradient(180deg, #ff5454 0.63%, #f4f4f4 80.65%);
  width: 100%;
  height: 50px;
  list-style: 50px;
}
.icon {
  width: 50px;
  height: 50px;
}
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
</style>
